<h5 class="section-heading">
    Detail
    <info-popover mode="right-normal"><span ng-bind-html="$GF.popover('Definition of link mapping', 'LINKS')"></span>
    </info-popover>
</h5>
<!-- WHAT/PATTERN -->
<div class="gf-form">
    <label class="gf-form-label width-10">
        What
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Enter shape Id or click on target button', 'LINKS')">
            </span>
        </info-popover>
    </label>
    <input type="text" style="margin-right: 2px;" id="{{ link.uid }}" placeholder="id or regex of shape"
        class="gf-form-input width-8" ng-model="link.pattern"
        title="Enter an id, label,metadata attribute or regex to identify object"
        bs-typeahead="rule.getLinkMapOptions().identByProp !== 'metadata' ? editor.getCellNamesTypeHead : editor.getCellNamesMD" data-min-length="0" data-items="100"
        ng-model-onblur data-placement="right" />
    <button class="btn btn-secondary btn-small" style="margin-left:2px; height: 32px;"
        ng-show="rule.getLinkMapOptions().identByProp !== 'metadata'"
        title="Select an object in diagram/graph" ng-click="link.enableMapping()">
        <div Class="gf-icon-target" style="margin-bottom: 7px;margin-right: 2px;"></div>
    </button>
    <button class="btn btn-secondary btn-small" style="margin-left:5px; height: 32px;" title="Identify selected objects"
        ng-mousedown="editor.highlightXCells(link)" ng-mouseup="editor.unhighlightXCells(link)" ng-mouseleave="editor.unhighlightXCells(link)">
        <div Class="gf-icon-location" style="margin-bottom: 7px;margin-right: 2px;"></div>
    </button>
</div>
<div class="gf-form">
    <label class="gf-form-label width-7" style="margin-right: 2px;">When
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select the condition to apply link on shape.', 'LINKS')">
            </span>
        </info-popover>
    </label>
    <select class="gf-form-input width-8" ng-model="link.condition"
        ng-options="c.value as c.text for c in editor.linkOn"></select>
</div>
<div class="gf-form">
    <label class="gf-form-label width-7" style="margin-right: 2px;">Url
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Enter absolute or relative URL', 'MAPPING#Link')"> </span>
        </info-popover></label>
    </label>
    <input type="text" style="margin-right: 2px;" class="gf-form-input width-10" bs-tooltip="'Enter the URL link'"
        ng-model="link.url" data-placement="right" />
</div>
<div class="gf-form">
    <label class="gf-form-label width-7" style="margin-right: 2px;">Parameters
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Apply actual parameters to URL', 'LINKS')">
            </span>
        </info-popover>
    </label>
    <gf-form-switch class="gf-form width-7" style="width: 66px;" checked="link.dashboardParams">
    </gf-form-switch>
</div>
